<template>
    <page-container bgColor="#F4F4F4">
        <cu-custom :isBack="true" :backSolt='backSolt' bgColor="bg-white" slot="header">
            <!-- #ifdef MP-WEIXIN -->
            <block slot="backbox">
                <view class="flex-box">
                    <view class="goBack-icon" @click="BackPage">
                        <image :src="staticImgUrl+'chat/gobackIcon.png'" mode=""></image>
                    </view>
                    <view class="flex-box">
                        <!-- 						<view class="message-icon">
							<image src="https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/shop/message.png" mode=""></image>
						</view> -->
                        <!-- 						<view class="report-icon">
							<image src="https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/shop/detail-share.png" mode=""></image>
						</view> -->
                    </view>
                </view>
            </block>
            <!-- #endif -->
            <block slot="content">
                <view class="text-center text-black ">个人创作</view>
            </block>
            <!-- #ifdef H5 -->
            <block slot="right">
                <view class="flex-box" style="margin-right: 24rpx;">
                    <!-- 					<view class="message-icon">
						<image src="https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/shop/message.png" mode=""></image>
					</view> -->
                    <!-- 					<view class="report-icon">
						<image src="https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/shop/detail-share.png" mode=""></image>
					</view> -->
                </view>
            </block>
            <!-- #endif -->
        </cu-custom>

        <view slot="center">

            <view class="individual">
                <view class="individual-box">
                    <view class="individual-icon">
                        <image :src="shopinfo.logo" v-if="shopinfo.logo"></image>
                        <image :src="staticImgUrl+'/logo.png'" v-else></image>
                        <view class="shoptype-icon">
                            <image :src="staticImgUrl+'/chat/shopTypes.png'" mode=""></image>
                        </view>
                    </view>
                    <view class="individual-name">{{shopinfo.site_name}}</view>
                    <block v-if='dy==true'>
                        <view class="link-btns" v-if="isShop==0" @click="addFollowBtn()">
                            +关注
                        </view>
                        <view class="link-btns" v-if="isShop==1" @click="delFollowBtn()">
                            已关注
                        </view>
                    </block>
                </view>

                <view class="pvInfo">
                    <view class="pv-text">
                        <view class="pv-num">{{shopinfo.content_num||0}}</view>
                        <view class="pv-textname">发布</view>
                    </view>
                    <view class="pv-text">
                        <view class="pv-num">{{shopinfo.sub_num||0}}</view>
                        <view class="pv-textname">粉丝</view>
                    </view>
                    <view class="pv-text">
                        <view class="pv-num">{{shopinfo.love_num||0}}</view>
                        <view class="pv-textname">获赞</view>
                    </view>
                </view>

                <view class="synopsis">
                    <view :class="[showjj==false?'synopsis-text':'synopsis-text-Two']">
                        简介:{{shopinfo.seo_description || '暂无简介'}}
                    </view>
                    <view class="unfold" @click="unfoldclick()" v-if="shopinfo.seo_description">{{unfoldtext}}</view>
                </view>

                <!-- <view class="fgx"></view> -->
                <view class="shop-info" @click="toShop(shopinfo)">
                    <view class="shopName">
                        <view class="shopIcon">
                            <image src="https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/chat/shop.png" mode=""></image>
                        </view>
                        <view class="shop-name-text">{{shopinfo.site_name}}{{shopinfo.category_name||''}}</view>
                    </view>
                    <view class="toShop-icon">
                        <image src="https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/chat/right.png" mode=""></image>
                    </view>
                </view>

                <view>
                    <!-- 当设置tab-width,指定每个tab宽度时,则不使用flex布局,改用水平滑动 -->
                    <menu-tabs v-model="tabIndex" :tabs="tabs" v-if="tabs.length > 5" :fixed="true" :tab-width="142" @change="tabBtn" backColor="transparent" lineColor="red"></menu-tabs>
                    <menu-tabs v-model="tabIndex" :tabs="tabs" v-else :fixed="false" @change="tabBtn" backColor="transparent" lineColor="red"></menu-tabs>
                </view>

            </view>
            <swiper class="swiper_group" :indicator-dots="false" :current="tabIndex" @change="swiperCall">
                <swiper-item style="padding-top: 30rpx;">
                    <swiperlist :show="0" :tw='0' :site_id='site_id' :req='0'></swiperlist>
                </swiper-item>
                <swiper-item style="padding-top: 30rpx;">
                    <swiperlist :show="0" :tw='1' :site_id='site_id' :req='1'></swiperlist>
                </swiper-item>
                <swiper-item style="padding-top: 30rpx;">
                    <swiperlist :show="1" :site_id='site_id' :req='2'></swiperlist>
                </swiper-item>
                <swiper-item style="padding-top: 30rpx;">
                    <swiperlist :show="1" :site_id='site_id' :req='3'></swiperlist>
                </swiper-item>
            </swiper>

            <div class="popContainer" @click="join()" v-if="isJoin">
                <div class="imgHy">
                    <image :src="staticImgUrl+'logo.png'"></image>
                </div>
                <div class="fxHy">点击右上角分享给亲朋好友吧~</div>
            </div>

        </view>

    </page-container>
</template>

<script>
import swiperlist from './components/swiperlist.vue'
import MescrollMixin from '@/components/mescroll/mescroll-mixins.js'
import MescrollMoreItemMixin from '@/components/mescroll/mixins/mescroll-more-item.js'
import {
	mapState,
	mapGetters
} from 'vuex'
export default {
	mixins: [MescrollMixin, MescrollMoreItemMixin],
	name: 'Produce',
	data() {
		return {
			backSolt: false,
			tabs: ['橱窗', '图文', '视频', '直播'],
			tabIndex: 0,
			mescroll: null,
			downOption: {
				auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
			},
			upOption: {
				auto: true, // 不自动加载
				noMoreSize: 10, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				empty: {
					icon: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/home/empty.png',
					tip: '~ 空空如也 ~' // 提示
				}
			},
			showjj: false,
			unfoldtext: '展开',
			site_id: '',
			shopinfo: {},
			isShop: 0,
			isJoin: false,
			dy: true,
			member_id: 0
		}
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	components: {
		swiperlist
	},
	onLoad() {
		if (!this.$util.isLoginCall()) return false
		this.tabIndex = Number(0)
		setTimeout(() => {
			this.site_id = this.$util.queryObj().site_id
			this.getshopinfo(this.$util.queryObj().site_id)
			this.getissubscribe(this.$util.queryObj().site_id)
			this.member_id = Number(this.$util.queryObj().member_id)
			uni.setStorageSync('produceMember_id', Number(this.$util.queryObj().member_id))
			// console.log("this.member_id===>",this.member_id)
			if (this.userInfo.member_id == this.$util.queryObj().member_id) {
				this.dy = false
			}
		}, 300)
	},
	created() {

	},
	mounted() {
		// #ifdef MP-WEIXIN
		this.backSolt = true
		// #endif
		this.pagesLen = getCurrentPages().length
	},
	onUnload() {
		uni.removeStorageSync('produceMember_id')
	},
	methods: {
		// 是否弹窗
		join() {
			let that = this
			that.isJoin = !that.isJoin
		},
		// 禁止页面滚动(规避警告)
		stopSlide() {
			return
		},
		// 初始化
		mescrollInit(e) {
			this.mescroll = e
		},
		/* 下拉刷新的回调 */
		downCallback(e) {
			// this.mescroll.resetUpScroll();
		},
		/* 上拉加载的回调 */
		upCallback(page) {
			this.mescroll.endSuccess(page.num)

		},

		// getissubscribe(site_id) {
		// 	$Axios.post(`api/shopmember/issubscribe`, {
		// 		site_id: site_id
		// 	}).then(res => {
		// 		// console.log(res)
		// 		this.isShop = res
		// 	})
		// },

		getissubscribe(site_id) {
			this.$request.getissubscribe({ site_id }).then(res => {
				this.isShop = res.data
			})
		},

		toShop() {
			this.$util.redirectTo('/otherpages/shop/index/index',{site_id: this.site_id})
		},
		// getshopinfo(site_id) {

		// 	$Axios.post(`api/shop/baseinfo`, {
		// 		site_id: site_id
		// 	}).then(res => {
		// 		console.log(res)
		// 		this.shopinfo = res
		// 	})
		// },

		getshopinfo(site_id) {
			this.$request.getshopinfo({ site_id }).then(res => {
				this.shopinfo = res.data
			})
		},

		unfoldclick() {
			this.showjj = !this.showjj
			if (this.showjj == false) {
				this.unfoldtext = '展开'
			} else {
				this.unfoldtext = '收起'
			}
		},
		BackPage() {
			// 判断页面栈是否只有一个
			if (this.pagesLen == 1) {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			} else {
				uni.navigateBack({
					delta: 1
				})
			}
		},
		tabBtn(val) {
			// this.mescroll.resetUpScroll();
			this.tabIndex = val
		},
		swiperCall(e) {
			this.tabIndex = e.detail.current
		},
		delFollowBtn() {
			var that = this
			if (!this.$util.isLoginCall()) return false
			uni.showModal({
				title: '温馨提示',
				content: '是否确定取消关注这家商铺?',
				success: res => {
					if (res.confirm) {
						// $Axios.post(`api/shopmember/delete`, {
						// 	site_id: that.site_id
						// }).then(res => {
						// 	that.$Utils.tip('店铺取消关注成功');
						// 	that.isShop = 0;
						// })

						this.$request.deleteMemberFollow({ site_id: that.site_id }).then(res => {
							that.$util.tip('店铺取消关注成功')
							that.isShop = 0
						})
					}
				}
			})
		},
		addFollowBtn() {
			var that = this
			if (!this.$util.isLoginCall()) return false
			// $Axios.post(`api/shopmember/add`, {
			// 	site_id: that.site_id
			// }).then(res => {
			// 	this.$Utils.tip('店铺关注成功');
			// 	this.isShop = 1;
			// })

			this.$request.addFollowBtn({ site_id: that.site_id }).then(res => {
				this.$util.tip('店铺关注成功')
				this.isShop = 1
			})
		}
	}
}
</script>
<style lang="scss" scoped>
image {
    width: 100%;
    height: 100%;
}

.swiper_group {
    height: 100vh;
    background-color: #f4f4f4;
}

.flex-box {
    display: flex;
    align-items: center;
}

.goBack-icon {
    width: 19rpx;
    height: 36rpx;
    margin-right: 40rpx;
}

.message-icon {
    width: 50rpx;
    height: 50rpx;
}

.report-icon {
    margin-left: 30rpx;
    width: 52rpx;
    height: 52rpx;
}

.individual {
    width: 100%;
    height: auto;
    background-color: #ffffff;
    padding-bottom: 20rpx;

    .individual-box {
        padding: 34rpx;
        display: flex;
        align-items: center;
        position: relative;

        .individual-icon {
            width: 120rpx;
            height: 120rpx;
            border-radius: 50%;
            border: 5rpx solid #ff394b;
            background-color: #ccc;
            position: relative;
        }

        .shoptype-icon {
            width: 96rpx;
            height: 36rpx;
            position: absolute;
            bottom: -15rpx;
            left: 0;
        }

        .shoptype-icon image {
            border-radius: 0 !important;
        }

        .individual-icon image {
            border-radius: 50%;
        }

        .individual-name {
            font-size: 40rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #333333;
            padding-left: 20rpx;
        }
    }

    .pvInfo {
        display: flex;
        justify-content: flex-start;
        padding-top: 20rpx;
        padding-left: 34rpx;

        .pv-text {
            margin-right: 100rpx;
            text-align: center;
        }

        .pv-num {
            font-size: 32rpx;
            font-family: DIN;
            font-weight: 500;
            color: #100f2a;
        }

        .pv-textname {
            font-size: 20rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #999999;
        }
    }
}

.fgx {
    width: 100%;
    height: 3rpx;
    background: #eeeeee;
    margin-top: 30rpx;
    margin-bottom: 30rpx;
}

.discover-conten {
    height: 100%;
}

.link-btns {
    position: absolute;
    top: 50%;
    left: 90%;
    transform: translate(-50%, -50%);
    width: 120rpx;
    height: 56rpx;
    background: linear-gradient(90deg, #ff7124, #ff364e);
    border-radius: 28rpx;
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
    line-height: 56rpx;
}

.synopsis {
    width: 684rpx;
    // height: 60rpx;
    margin: 15px auto 0 auto;
    position: relative;

    .synopsis-text {
        width: 643rpx;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        color: #999999;
        font-size: 24rpx;
        font-family: PingFang SC;
    }

    .synopsis-text-Two {
        width: 643rpx;
        color: #999999;
        font-size: 24rpx;
        font-family: PingFang SC;
    }

    .unfold {
        position: absolute;
        bottom: 0rpx;
        right: 0;
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ff384c;
    }
}

.shop-info {
    width: 92%;
    margin: 0 auto;
    height: 80rpx;
    background: #ffffff;
    box-shadow: 0rpx 1rpx 0rpx 0rpx #f4f4f4;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.shopName {
    display: flex;
    // align-items: center;
}

.shopIcon {
    width: 32rpx;
    height: 32rpx;
}

.shop-name-text {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #222222;
    padding-left: 20rpx;
}

.toShop-icon {
    width: 13rpx;
    height: 24rpx;
}

.popContainer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 999999999;
}

.imgHy {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200rpx;
    height: 200rpx;
    border-radius: 50%;
}

.imgHy image {
    border-radius: 50%;
}

.fxHy {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 50rpx;
    text-align: center;
}
</style>
